<template>
  <div id="app">
    <!-- 标题栏 -->
    <div class="title-bar">
      <div class="back-arrow">
        <svg
          t="1747792003449"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          width="25.5"
          height="25.5"
          @click="goBack"
        >
          <path
            d="M658.24 210.304H292.544V64L0 283.456l292.544 219.456V356.544H658.24c124.352 0 219.52 95.04 219.52 219.456s-95.104 219.456-219.52 219.456H292.544V941.76H658.24C855.744 941.76 1024 780.8 1024 576S863.104 210.304 658.24 210.304z"
            fill="#2c2c2c"
          />
        </svg>
      </div>
      <h2>营养分析</h2>
    </div>

    <!-- 饮食炎症属性 -->
    <div class="inflammation-status">
      <div class="status-label">
        饮食炎症属性：
      </div>
      <div class="status-value">
        {{ inflammationStatus }}
      </div>
    </div>

    <!-- 基础营养素分析 -->
    <div class="nutrition-analysis">
      <div class="analysis-title">
        基础营养素分析
      </div>
      <div class="chart-container">
        <div ref="nutrientChart" class="nutrient-chart" />
      </div>
      <div class="nutrition-items">
        <div class="nutrition-item">
          <span>碳水化合物 (g)</span>
          <span>{{ nutrientData.carbohydrates }}</span>
        </div>
        <div class="nutrition-item">
          <span>蛋白质 (g)</span>
          <span>{{ nutrientData.protein }}</span>
        </div>
        <div class="nutrition-item">
          <span>脂肪 (g)</span>
          <span>{{ nutrientData.fat }}</span>
        </div>
      </div>
    </div>

    <!-- 炎症指数分析 -->
    <div class="inflammation-analysis">
      <div class="analysis-title">
        炎症指数
      </div>
      <div class="inflammation-items">
        <div class="inflammation-item">
          <span>钠 (mg)</span>
          <span>{{ inflammationData.sodium.intake }}</span>
          <span>{{ inflammationData.sodium.recommendation }}</span>
        </div>
        <div class="inflammation-item">
          <span>钾 (g)</span>
          <span>{{ inflammationData.potassium.intake }}</span>
          <span>{{ inflammationData.potassium.recommendation }}</span>
        </div>
        <div class="inflammation-item">
          <span>钙 (g)</span>
          <span>{{ inflammationData.calcium.intake }}</span>
          <span>{{ inflammationData.calcium.recommendation }}</span>
        </div>
        <div class="inflammation-item">
          <span>铁 (g)</span>
          <span>{{ inflammationData.iron.intake }}</span>
          <span>{{ inflammationData.iron.recommendation }}</span>
        </div>
        <div class="inflammation-item">
          <span>维生素D (μg)</span>
          <span>{{ inflammationData.vitaminD.intake }}</span>
          <span>{{ inflammationData.vitaminD.recommendation }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
// import * as echarts from 'echarts';

export default {
  name: 'NutritionAnalysis',
  setup () {
    // 营养数据
    const nutrientData = {
      carbohydrates: 150,
      protein: 50,
      fat: 30,
    };

    // 炎症指数数据
    const inflammationData = {
      sodium: { intake: 2500, recommendation: 2000 },
      potassium: { intake: 3.5, recommendation: 4.7 },
      calcium: { intake: 800, recommendation: 1000 },
      iron: { intake: 10, recommendation: 18 },
      vitaminD: { intake: 15, recommendation: 20 },
    };

    // 饮食炎症属性
    const inflammationStatus = ref('抗炎');

    // ECharts 图表实例
    let nutrientChart = null;

    // 初始化图表
    const initCharts = () => {
      // 初始化基础营养素图表
      nutrientChart = echarts.init(document.querySelector('.nutrient-chart'));

      // 配置基础营养素图表
      nutrientChart.setOption({
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          data: ['碳水化合物', '蛋白质', '脂肪'],
        },
        series: [
          {
            name: '营养素分布',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: nutrientData.carbohydrates, name: '碳水化合物', itemStyle: { color: '#87CEFA' } },
              { value: nutrientData.protein, name: '蛋白质', itemStyle: { color: '#4682B4' } },
              { value: nutrientData.fat, name: '脂肪', itemStyle: { color: '#1E90FF' } },
            ],
          },
        ],
      });

      // 窗口大小变化时重新绘制图表
      window.addEventListener('resize', () => {
        nutrientChart.resize();
      });
    };

    // 返回按钮点击事件
    const goBack = () => {
      window.history.back();
    };
    // 生命周期钩子：组件挂载后初始化图表
    onMounted(() => {
      initCharts();
    });

    return {
      nutrientData,
      inflammationData,
      inflammationStatus,
      goBack,
    };
  },
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  color: #2c3e50;
  padding: 0;
  margin: 0;
  background-color: #f5f5f5;
}

/* 标题栏样式 */
.header {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
}

.back-icon {
  margin-right: 10px;
  font-size: 20px;
}

.header h1 {
  font-size: 18px;
  margin: 0;
}

/* 饮食炎症属性样式 */
.inflammation-status {
  background-color: #e6f2ff;
  padding: 15px;
  margin: 15px;
  border-radius: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-label {
  font-weight: bold;
}

.status-value {
  color: #4169e1;
}

/* 基础营养素分析样式 */
.nutrition-analysis {
  background-color: #fff;
  padding: 15px;
  margin: 15px;
  border-radius: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.analysis-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
}

.chart-container {
  height: 200px;
  margin-bottom: 15px;
}

.nutrient-chart {
  width: 100%;
  height: 100%;
}

.nutrition-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nutrition-item {
  display: flex;
  justify-content: space-between;
}

/* 炎症指数分析样式 */
.inflammation-analysis {
  background-color: #fff;
  padding: 15px;
  margin: 15px 15px 30px 15px;
  border-radius: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.inflammation-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inflammation-item {
  display: flex;
  justify-content: space-between;
}

.inflammation-item span:last-child {
  color: #666;
}
.title-bar {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.back-arrow {
  margin-right: 10px;
}
</style>
